// stores/modules/layout.js
import { defineStore } from 'pinia'
import { ref, computed, watch } from 'vue'
import { useLocalStorage } from '@vueuse/core'
import { useDevice } from '@/composables/useDevice.js'

// 默认布局设置
const defaultLayoutSetting = {
  mode: 'vertical',               // 布局模式
  sidebarCollapsed: false,        // 侧边栏折叠
  showBreadcrumb: true,           // 显示面包屑
  showTabs: true,                 // 显示标签页
  showFooter: true,               // 显示页脚
  enableAnimation: true           // 启用动画
}

// 布局配置映射 - SoyBean 核心理念
const layoutConfigMap = {
  // 垂直布局 - 经典左侧菜单
  'vertical': {
    name: '垂直布局',
    description: '经典左侧菜单',
    header: {
      showLogo: false,
      showMenu: false,
      showMenuToggler: true,
      showBreadcrumb: true,
      height: 56
    },
    sidebar: {
      visible: true,
      showLogo: true,
      width: 240,
      collapsedWidth: 64,
      mobileWidth: 280
    },
    supportMobile: true
  },
  
  // 水平布局 - 顶部菜单
  'horizontal': {
    name: '水平布局',
    description: '顶部菜单',
    header: {
      showLogo: true,
      showMenu: true,
      showMenuToggler: false,
      showBreadcrumb: false,
      height: 64
    },
    sidebar: {
      visible: false,
      showLogo: false,
      width: 0,
      collapsedWidth: 0,
      mobileWidth: 0
    },
    supportMobile: false
  },
  
  // 混合布局 - 顶部+左侧
  'horizontal-mix': {
    name: '混合布局',
    description: '顶部+左侧菜单',
    header: {
      showLogo: true,
      showMenu: true,
      showMenuToggler: true,
      showBreadcrumb: false,
      height: 64
    },
    sidebar: {
      visible: true,
      showLogo: false,
      width: 200,
      collapsedWidth: 0,
      mobileWidth: 260
    },
    supportMobile: false
  }
}

export const useLayoutStore = defineStore('layout', () => {
  const { isMobile } = useDevice()
  
  // 响应式状态
  const layoutSetting = useLocalStorage('vilan-layout-setting', defaultLayoutSetting)
  const mobileDrawerVisible = ref(false)
  
  // 当前布局配置
  const currentLayoutConfig = computed(() => {
    return layoutConfigMap[layoutSetting.value.mode] || layoutConfigMap.vertical
  })
  
  // 响应式布局模式（移动端强制垂直布局）
  const actualLayoutMode = computed(() => {
    if (isMobile.value) return 'vertical'
    return layoutSetting.value.mode
  })
  
  // 头部属性
  const headerProps = computed(() => {
    const baseProps = currentLayoutConfig.value.header
    if (isMobile.value) {
      return { ...baseProps, height: 50, showBreadcrumb: false }
    }
    return baseProps
  })
  
  // 侧边栏属性
  const sidebarProps = computed(() => ({
    ...currentLayoutConfig.value.sidebar,
    collapsed: layoutSetting.value.sidebarCollapsed
  }))
  
  // 内容区样式
  const contentStyles = computed(() => {
    const styles = {}
    
    // 计算左边距
    if (sidebarProps.value.visible && !isMobile.value) {
      const width = layoutSetting.value.sidebarCollapsed 
        ? sidebarProps.value.collapsedWidth 
        : sidebarProps.value.width
      styles.marginLeft = `${width}px`
    }
    
    // 计算上边距
    if (headerProps.value) {
      styles.marginTop = `${headerProps.value.height}px`
    }
    
    // 移动端样式重置
    if (isMobile.value) {
      styles.marginLeft = '0'
    }
    
    return styles
  })
  
  // 布局CSS类名
  const layoutClasses = computed(() => [
    `layout-${actualLayoutMode.value}`,
    `layout-${isMobile.value ? 'mobile' : 'desktop'}`,
    {
      'layout-sidebar-collapsed': layoutSetting.value.sidebarCollapsed,
      'layout-mobile-drawer-open': mobileDrawerVisible.value,
      'layout-animation': layoutSetting.value.enableAnimation
    }
  ])
  
  // 布局模式选项
  const layoutModeOptions = computed(() => {
    return Object.entries(layoutConfigMap).map(([key, config]) => ({
      value: key,
      label: config.name,
      description: config.description,
      disabled: isMobile.value && !config.supportMobile
    }))
  })
  
  // 方法
  const setLayoutMode = (mode) => {
    if (isMobile.value && !layoutConfigMap[mode]?.supportMobile) {
      console.warn(`移动端不支持 ${mode} 布局模式`)
      return
    }
    layoutSetting.value.mode = mode
    console.log('🎯 布局模式已切换:', mode)
  }
  
  const toggleSidebar = () => {
    if (isMobile.value) {
      mobileDrawerVisible.value = !mobileDrawerVisible.value
    } else {
      layoutSetting.value.sidebarCollapsed = !layoutSetting.value.sidebarCollapsed
    }
  }
  
  const setLayoutFeature = (key, value) => {
    if (key in layoutSetting.value) {
      layoutSetting.value[key] = value
    }
  }
  
  // 监听器 - 移动端自动适配
  watch(isMobile, (mobile) => {
    if (mobile) {
      mobileDrawerVisible.value = false
      if (!currentLayoutConfig.value.supportMobile) {
        setLayoutMode('vertical')
      }
    }
  })
  
  return {
    // 状态
    layoutSetting,
    mobileDrawerVisible,
    // 计算属性
    currentLayoutConfig,
    actualLayoutMode,
    headerProps,
    sidebarProps,
    contentStyles,
    layoutClasses,
    layoutModeOptions,
    // 方法
    setLayoutMode,
    toggleSidebar,
    setLayoutFeature
  }
})